<template>
    <el-dialog  title="选择用户" :visible="true" width="1000px" @close="cancel()" destroy-on-close> 
        <div>
            <div class="choiceList">
                <div>
                    <el-tag
                        v-for="tag in tags"
                        :key="tag.id"
                        @close="handleClose(tag)"
                        closable>
                        {{tag.username}}
                    </el-tag>
                </div>
            </div>
            <div class="treeContent">
                <el-row :gutter="20">
                    <!--部门数据-->
                    <el-col :span="20" :xs="24">
                        <div class="head-container">
                            <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
                        </div>
                        <div class="head-container">
                        <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
                                ref="tree" default-expand-all @node-click="handleNodeClick"/>
                        </div>
                    </el-col>
                </el-row>
                <!--用户数据-->
                <el-col :span="20" :xs="24">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
                    <el-form-item label="用户名称" prop="username">
                        <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 150px"
                                @keyup.enter.native="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobile">
                        <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 150px"
                                @keyup.enter.native="handleQuery"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                    </el-form>
                    <el-table  v-loading="loading" :data="userList" @select="select"  row-key="id" ref="multipleTable" class="tableUser" :header-cell-class-name="cellClass"> 
                        <el-table-column type="selection" width="55"  column-key="selectKey" :reserve-selection="true"></el-table-column>
                        <el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
                        <el-table-column label="用户编号" align="center" key="id" prop="id"/>
                        <el-table-column label="用户名称" align="center" key="username" prop="username"  :show-overflow-tooltip="true" />
                        <el-table-column label="用户昵称" align="center" key="nickname" prop="nickname"  :show-overflow-tooltip="true" />
                        <el-table-column label="手机号码" align="center" key="mobile" prop="mobile"  width="120" />
                    </el-table>

                    <pagination v-show="total> 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                                @pagination="getList"/>
                </el-col>
            </div>
            <div class="button">
                <el-button  @click="cancel">取消</el-button> 
                <el-button @click="clearUser">清空</el-button> 
                <el-button type="primary" @click="selectUser">选择</el-button> 
            </div>
        </div>
    </el-dialog>
</template>

<script>
import {
  listUser,
} from "@/api/system/user";
import {listSimpleDepts} from "@/api/system/dept";
import {listSimplePosts} from "@/api/system/post";

export default {
    data() {
        return {
            closeFlag: true,
            tags: [],
            // 遮罩层
            loading: true,
            // 用户表格数据
            userList: [],
            // 部门名称
            deptName: undefined,
              // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                username: undefined,
                mobile: undefined,
            },
            defaultProps: {
                children: "children",
                label: "name"
            },
            multipleSelection: [],
            deptOptions: [],
            total: 0,
            totalTags:[],
        }
    },
    props: ['tagsList'],
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    mounted() {
        this.getList();
        this.getTreeselect();
        this.tags= [...this.tagsList]
    },
    methods: {
        cellClass(row){
            console.log(row)
            if (row.columnIndex === 0) {
                return 'DisableSelection'
            }
        },
         // 获取row的key值
        getRowKeys(row) {
            return row.id
        },
        /** 查询用户列表 */
        getList() {
            this.loading = true;
            const _this = this
            listUser(this.queryParams).then(response => {
                _this.userList = response.data.list;
                _this.total = response.data.total;
                _this.loading = false;
                _this.renderBox(_this.userList)  
            });
        },
        renderBox(list){
            if (this.tags.length>0) {
                this.$nextTick(() => {
                    this.tags.forEach((tag) => {
                        list.forEach(user => {
                            if (user.id === tag.id) {
                                 this.$refs.multipleTable.toggleRowSelection(user, true)
                            }
                        })
                    });
                })
            }
        },
         /** 查询部门下拉树结构 + 岗位下拉 */
        getTreeselect() {
            listSimpleDepts().then(response => {
                // 处理 deptOptions 参数
                this.deptOptions = [];
                this.deptOptions.push(...this.handleTree(response.data, "id"));
            });
            listSimplePosts().then(response => {
                // 处理 postOptions 参数
                this.postOptions = [];
                this.postOptions.push(...response.data);
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.getList();
        },
          /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        select(selection,row) {
            const isTrue=this.tags.every(item=>item.id!==row.id)
            if(isTrue){
                this.tags.push(row)
            }else{
                this.tags=this.tags.filter(item=>item.id!==row.id)
            }
            if(this.closeFlag){
                this.multipleSelection = this.tags
            }  
        },
        /**单选事件 */
        getCurrentRow(val){
          this.tags=[]
            setTimeout(()=>{
              this.tags=[val]
            },400)
        },
        clearUser() {
            this.tags = []
            this.multipleSelection = []
            this.$refs.multipleTable.clearSelection()
        },
        handleClose(tag) {
            this.closeFlag = false
            const rows = this.tags.splice(this.tags.indexOf(tag), 1)
            this.getList()
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row, true)
                });
            }
        },
        cancel() {
            this.clearUser()
            this.$emit('closeRecipient')
        },
        selectUser() {
            this.$emit('userInfo',this.tags )
            this.cancel()
        },
    }
}
</script>

<style lang="scss" scoped>
    .choiceList{
        border: 1px dashed;
        height: 50px;
        padding: 10px 20px;
    }
    .choiceList .el-tag+.el-tag{
        margin-left: 10px;
    }
    .treeContent{
        display: flex;
        margin-top: 20px;
    }
    .button{
        text-align: right;
        margin-top: 20px;
    }
    .tableUser ::v-deep .DisableSelection > .cell {
        display: none !important;
    }
</style>